<template>
  <!-- 人员管理页面 -->
  <div class="app-container">
    <el-form :model="queryParams" :inline="true" label-width="80px">
      <el-form-item label="门店名称">
        <el-input
          v-model="queryParams.customerName"
          placeholder="请输入门店名称"
          size="small"
          style="width: 160px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>

      <el-form-item label="门店电话">
        <el-input
          v-model="queryParams.customerPhone"
          placeholder="请输入门店电话"
          size="small"
          style="width: 160px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="门店地址">
        <el-input
          v-model="queryParams.customerReceivingAddress"
          placeholder="请输入门店地址"
          size="small"
          style="width: 160px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="门店标签">
        <el-select
          v-model="queryParams.customerTag"
          placeholder="请选择门店标签"
          size="small"
          style="width: 160px"
        >
          <el-option label="请选择" value="-1" />
          <el-option
            :label="item.customerType"
            :value="item.customerType"
            v-for="item in typeGetList"
            :key="item.typeId"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
    </el-form>
    <el-row :gutter="10" class="mb8">
      <!-- <el-col :span="1.5" class="create"> -->
      <el-button
        type="primary"
        plain
        icon="el-icon-plus"
        size="mini"
        @click="handleAddOrder"
        >新增</el-button
      >
      <el-button
        type="danger"
        plain
        icon="el-icon-refresh"
        size="mini"
        @click="handleClearCache"
        >刷新</el-button
      >
    </el-row>
    <el-table v-loading="loading" :data="typeList">
      <el-table-column label="序号" align="center" type="index" width="60" />
      <el-table-column
        label="门店名称"
        align="center"
        prop="customerName"
        width="200"
      />
      <el-table-column
        label="门店电话"
        align="center"
        :show-overflow-tooltip="true"
        prop="customerPhone"
      >
      </el-table-column>
      <el-table-column
        label="门店地址"
        align="center"
        :show-overflow-tooltip="true"
        prop="customerReceivingAddress"
      >
      </el-table-column>

      <el-table-column label="门店标签" align="center" prop="labelInfo">
      </el-table-column>
      <el-table-column
        label="联系人"
        align="center"
        prop="customerContact"
        width="180"
      >
      </el-table-column>
      <el-table-column
        label="创建时间"
        align="center"
        :show-overflow-tooltip="true"
        prop="createTime"
      >
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        :show-overflow-tooltip="true"
        prop=""
      >
        <template slot-scope="scope">
          <!-- <el-button size="mini" type="text" @click="handleGoDetail(scope.row)">详情</el-button> -->
          <el-button size="mini" type="text" @click="handleGoEdit(scope.row)"
            >编辑</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <!-- 添加门店弹窗 -->
    <el-dialog
      :title="title"
      :visible.sync="open"
      width="700px"
      append-to-body
      @closed="cancel"
      class="dialog"
    >
      <div class="xian_"></div>
      <el-form
        ref="form"
        :model="ruleForm"
        :rules="rulesForm"
        label-width="80px"
        :hide-required-asterisk="true"
      >
        <el-row>
          <el-col :span="11">
            <el-form-item label="门店名称" prop="customerName">
              <el-input
                v-model="ruleForm.customerName"
                placeholder="请输入门店名称"
                style="width: 220px"
              />
            </el-form-item>
          </el-col>
          <el-col :span="4"> </el-col>
          <el-col :span="11">
            <el-form-item
              label="门店电话"
              prop="customerPhone"
              style="margin-left: 30px"
            >
              <el-input
                v-model="ruleForm.customerPhone"
                placeholder="请输入门店电话"
                maxlength="11"
                style="width: 220px"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item label="门店地址" prop="customerReceivingAddress">
              <el-input
                v-model="ruleForm.customerReceivingAddress"
                placeholder="请输入门店地址"
                style="width: 220px"
              />
            </el-form-item>
          </el-col>
          <el-col :span="4"> </el-col>
          <el-col :span="11" class="one_phone">
            <el-form-item
              label="联系人  "
              prop="customerContact"
              label-width="80px"
              style="margin-left: 30px"
              class="item_label"
            >
              <el-input
                v-model="ruleForm.customerContact"
                placeholder="请输入联系人"
                maxlength="10"
                style="width: calc(100%-10px); width: 220px"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <div class="rollContent">
          <el-row v-for="(item1, index1) in addLableList" :key="index1">
            <el-col :span="11">
              <el-form-item
                :label="index1 == 0 ? '门店标签' : ' '"
                style="display: flex; height: 15px"
              >
                <div class="left_l">
                  <div class="item_one">
                    <span class="text">{{ item1.customerType }}</span>
                    <span
                      class="el-icon-close"
                      @click="handleToDel(index1)"
                    ></span>
                  </div>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="" label-width="40px">
                <div class="twoLabel">
                  <div
                    class="item_"
                    v-for="(item2, index2) in item1.tagList"
                    :key="index2"
                  >
                    <span class="text">{{ item2.customerType }}</span>
                    <span
                      class="el-icon-close"
                      @click="handleDelTagName(index1, index2)"
                    ></span>
                  </div>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="11">
              <el-form-item
                :label="addLableList.length == 0 ? '门店标签' : ' '"
              >
                <el-select
                  v-model="customerType"
                  placeholder="请选择一级标签"
                  size="small"
                  style="width: 220px; height: 36px"
                  @change="handleOneLabelChange"
                >
                  <el-option
                    :label="item.customerType"
                    :value="index"
                    v-for="(item, index) in typeGetList"
                    :key="item.typeId"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4"> </el-col>
            <el-col :span="11">
              <el-form-item label="" label-width="40px" class="textInput">
                <el-input
                  type="text"
                  v-model="keyWord"
                  placeholder="请输入二级标签名称"
                  @input="handleInput"
                  style="width: 290px"
                />
              </el-form-item>
              <div class="moudel" v-show="keyWord">
                <div
                  class="row"
                  v-for="(item, index) in labelList"
                  :key="index"
                  @click="handleChoose(index)"
                >
                  <span>{{ item.customerType }}</span
                  ><span class="choosed" v-show="item.isChoosed">已选</span>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button
          type="primary"
          @click="submitForm('form')"
          v-if="title == '新增门店'"
          >确 定</el-button
        >
        <el-button
          type="primary"
          @click="submitFormEdit('form')"
          v-if="title == '编辑门店'"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  customerList,
  customerTypeList,
  customerAddList,
  customerTypeTagList,
  customerTypeTagEdit,
} from "@/api/sale/customer";
export default {
  data() {
    return {
      customerId: "",
      customerType: "",
      typeId: "",
      isPass: false,
      activeIndex: "",
      keyWord: "",
      labelList: [],
      addLableList: [], //添加的标签数组
      twoLabelList: [],
      title: "新增门店",
      ruleForm: {
        customerName: null,
        customerPhone: null,
        customerReceivingAddress: null,
        customerContact: null,
      },
      typeGetList: [],
      // 遮罩层
      loading: true,
      // 选中数组
      total: 0,
      // 订单列表
      typeList: [],
      // 是否显示弹出层
      open: false,
      // 搜索状态字典
      statusOptions: [], //支付类型
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        customerName: null,
        customerPhone: null,
        customerReceivingAddress: null,
        customerTag: "-1",
      },
      rulesForm: {
        customerName: [
          { message: "请输入门店名称", trigger: "blur", required: true },
        ],
        customerPhone: [
          { message: "请输入门店电话", trigger: "blur", required: true },
        ],
        customerReceivingAddress: [
          { message: "请输入门店地址", trigger: "blur", required: true },
        ],
        customerContact: [
          { message: "请输入联系人", trigger: "blur", required: true },
        ],
      },
    };
  },
  created() {
    this.getList();
  },
  mounted() {
    this.handleGetType();
  },
  methods: {
    handleDelTagName(index, index1) {
      //删除子标签
      this.addLableList[index].tagList.splice(index1, 1);
      this.keyWord = "";
    },
    handleInput() {
      //输入事件
      if (this.typeId == "") {
        this.$message({
          message: "请选择一级标签",
          type: "success",
        });
        this.keyWord = "";
        return false;
      }
      customerTypeTagList({
        pageNum: 1,
        pageSize: 20,
        customerType: this.keyWord,
        parentId: this.typeId,
      }).then((res) => {
        if (res.code == 200) {
          this.labelList = res.rows.map((v) => {
            v.isChoosed = false;
            return v;
          });
          if (this.activeIndex !== "") {
            this.addLableList[this.activeIndex].tagList.forEach((v, i) => {
              this.labelList.forEach((item) => {
                if (item.customerType == v.customerType) {
                  item.isChoosed = true;
                }
              });
            });
          }
        }
      });
    },
    handleChoose(index) {
      //选择哪个
      if (this.labelList[index].isChoosed) {
        return false;
      }
      this.labelList[index].isChoosed = true;
      this.keyWord = "";
      console.log(this.activeIndex)
      if (this.activeIndex === "") {
        console.log(1)
        this.addLableList[this.addLableList.length - 1].tagList = [
          ...this.addLableList[this.addLableList.length - 1].tagList,
          {
            customerType: this.labelList[index].customerType,
            typeId: this.labelList[index].typeId,
          },
        ];
        this.addLableList[this.addLableList.length - 1].tagList = [
          ...new Set(this.addLableList[this.addLableList.length - 1].tagList),
        ];
      } else {
        console.log(2)
        this.addLableList[this.activeIndex].tagList = [
          ...this.addLableList[this.activeIndex].tagList,
          {
            customerType: this.labelList[index].customerType,
            typeId: this.labelList[index].typeId,
          },
        ];
        this.addLableList[this.activeIndex].tagList = [
          ...new Set(this.addLableList[this.activeIndex].tagList),
        ];
      }
    },
    submitFormEdit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          customerTypeTagEdit({
            ...this.ruleForm,
            customerTag: JSON.stringify({ listTag: this.addLableList }),
            customerId: this.customerId,
          }).then((res) => {
            if (res.code == 200) {
              this.$message({
                message: "编辑门店信息成功",
                type: "success",
              });
              this.open = false;
              setTimeout(() => {
                this.getList();
                this.ruleForm = {
                  customerName: "",
                  customerPhone: "",
                  customerReceivingAddress: "",
                  customerContact: "",
                };
                this.addLableList = [];
                this.keyWord = "";
                this.customerType = "";
              }, 100);
            }
          });
        } else {
          return false;
        }
      });
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          customerAddList({
            ...this.ruleForm,
            customerTag: JSON.stringify({ listTag: this.addLableList }),
          }).then((res) => {
            if (res.code == 200) {
              this.$message({
                message: "录入门店信息成功",
                type: "success",
              });
              this.open = false;
              setTimeout(() => {
                this.getList();
                this.ruleForm = {
                  customerName: "",
                  customerPhone: "",
                  customerReceivingAddress: "",
                  customerContact: "",
                };
                this.addLableList = [];
                this.keyWord = "";
                this.customerType = "";
                this.typeId = "";
              }, 100);
            }
          });
        } else {
          return false;
        }
      });
    },
    cancel() {
      //创建取消
      this.open = false;
      this.ruleForm.customerName = null;
      this.ruleForm.customerPhone = null;
      this.ruleForm.customerReceivingAddress = null;
      this.ruleForm.customerContact = null;
      this.keyWord = "";
      this.typeId = "";
      this.customerType = "";
    },
    handleGetType() {
      //标签列表
      customerTypeList({ pageNum: 1, pageSize: 20 }).then((res) => {
        if (res.code == 200) {
          this.typeGetList = res.rows.map((v) => {
            v.tagList = [];
            return v;
          });
        }
      });
    },
    handleClearCache() {
      window.location.reload();
    },
    handleGoEdit(row) {
      //编辑弹窗
      console.log(row.customerTagList);
      this.open = true;
      this.title = "编辑门店";
      this.ruleForm.customerName = row.customerName;
      this.addLableList = row.customerTagList;
      this.ruleForm.customerPhone = row.customerPhone;
      this.ruleForm.customerReceivingAddress = row.customerReceivingAddress;
      this.ruleForm.customerContact = row.customerContact;
      this.customerId = row.customerId;
    },
    handleToDel(index) {
      //一级标签删除
      this.addLableList.splice(index, 1);
      this.keyWord = "";
      this.customerType = "";
      this.typeId = "";
    },
    handleOneLabelChange(e) {
      this.isPass = false;
      //一级标签发生变化
      this.keyWord = "";
      this.typeId = this.typeGetList[e].typeId;
      this.labelList.length = 0;
      try {
        this.addLableList.forEach((v, i) => {
          if (v.parentId == this.typeGetList[e].typeId) {
            this.isPass = true;
            this.activeIndex = i; //已存在
            foreach.break = new Error("StopIteration");
          }else{
             this.activeIndex = ""
          }
        });
        if (!this.isPass) {
          this.addLableList.push({
            customerType: this.typeGetList[e].customerType,
            parentId: this.typeGetList[e].typeId,
            tagList: [],
          });
        }
      } catch (e) {
      }
    },
    handleAddOrder(row) {
      //新增
      this.title = "新增门店";
      this.ruleForm.customerName = null;
      this.ruleForm.customerPhone = null;
      this.ruleForm.customerReceivingAddress = null;
      this.ruleForm.customerContact = null;
      this.addLableList = []; //添加的标签数组
      this.twoLabelList = [];
      this.open = true;
    },
    /** 查询字典类型列表 */
    getList(index) {
      this.loading = true;
      customerList(this.queryParams).then((response) => {
        this.typeList = response.rows;
        this.typeList = response.rows.map((item) => {
          var labelInfo = [];
          item.customerTagList.forEach((v) => {
            labelInfo.push(v.customerType);
          });
          item.labelInfo = labelInfo.join("，");
          return item;
        });
        this.total = response.total;
        this.loading = false;
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    resetQuery() {
      //重置事件
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        customerName: null,
        customerPhone: null,
        customerReceivingAddress: null,
        customerTag: "-1",
      };
      this.getList();
    },
  },
};
</script>
<style lang="scss" scoped>
.one_phone ::v-deep .el-form-item__label {
  text-align: justify !important;
  text-align-last: justify !important;
}
.xian_ {
  height: 1px;
  width: 700px;
  background-color: #eee;
  margin-left: -20px;
  margin-top: -25px;
  margin-bottom: 30px;
}
::v-deep .el-input__inner {
  outline: none !important;
  height: 36px !important;
}
.dialog .item_label ::v-deep .el-form-item__label {
  width: 60px !important;
  text-align: justify !important;
  text-align-last: justify !important;
  margin-left: 10px;
}
.dialog .one_phone ::v-deep .el-form-item__label {
  width: 70px !important;
}
.el-input--suffix .el-input__inner {
  height: 36px !important;
  line-height: 36px !important;
}
.el-input--medium {
  margin-bottom: 10px !important;
}
.textInput {
  margin-right: -50px;
  position: relative;
}
.moudel {
  width: 290px;
  height: 200px;
  overflow: auto;
  background: #f7f7f7;
  // border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 13px;
  margin-left: 41px;
  margin-top: -20px;
  .row {
    cursor: pointer;
    margin-top: 13px;
    width: 187px;
    height: 25px;
    background: #ffffff;
    border-radius: 8px;
    display: flex;
    padding: 0 8px;
    box-sizing: border-box;
    justify-content: space-between;
    align-items: center;
    .choosed {
      width: 33px;
      height: 18px;
      background: rgba(133, 220, 204, 0.3);
      border-radius: 4px;
      text-align: center;
      line-height: 18px;
      font-size: 12px;
      font-family: Adobe Heiti Std;
      font-weight: normal;
      color: #07b087;
    }
  }
}
.rollContent {
  max-height: 400px;
  overflow: auto;
  .title {
    margin-top: -4px;
    margin-left: 6px;
    font-size: 15px;
    color: #606266;
    position: relative;
    z-index: 6;
  }
  .left_l {
    margin-left: -80px;
    border: 1px solid #dcdfe6;
    width: 220px;
    height: 42px;
    padding-left: 6px;
    border-radius: 6px;
    .item_one {
      display: flex;
      justify-content: start;
      align-items: center;
      // margin-left: -80px;
      float: left;
      margin-top: 5px;
      cursor: pointer;
      padding: 0 10px;
      height: 32px;
      background: #f3f3f3;
      border-radius: 4px;
      line-height: 32px;
      text-align: center;
      width: auto;
      .text {
        margin-right: 10px;
      }
    }
  }
  span {
    display: inline-block;
  }
}
.twoLabel {
  padding: 0 5px;
  min-height: 40px;
  width: 290px;
  // padding-bottom: 20px;
  border: 1px solid #dcdfe6;
  display: flex;
  flex-wrap: wrap;
  position: relative;
  border-radius: 6px;
  .addLable {
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #4079ff;
    display: flex;
    align-items: center;
    position: absolute;
    bottom: -5px;
    right: 10px;
    cursor: pointer;
    span {
      margin-left: 3px;
    }
  }
  .item_ {
    cursor: pointer;
    padding: 0 5px;
    height: 32px;
    background: #f3f3f3;
    border-radius: 4px;
    line-height: 32px;
    text-align: center;
    margin-right: 5px;
    margin-top: 3px;
    margin-bottom: 3px;
    // margin-bottom: 5px;
    .text {
      margin-right: 5px;
    }
  }
}
.el-range-editor {
  width: 100% !important;
}
.dialog-footer {
  display: flex;
  justify-content: center;
}
.app-container {
  .el-col-11 {
    width: 100%;
  }
  .el-form-item__content {
    position: relative !important;
    margin-left: 0 !important;
    span {
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #333333;
      position: absolute;
      top: 1px;
      right: 12px;
    }
  }
  .mb8 {
    .title {
      font-size: 20px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #333333;
    }
    .create {
      margin-right: 20 px;
      float: right;
    }
  }
}
</style>